<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../lib/bootstrap3/css/bootstrap.min.css">
<script src="../lib/angularjs/angular.min.js"></script>
<script src="../lib/angularjs/angular-animate.min.js"></script>
<script src="../lib/angularjs/angular-route.min.js"></script>
</head>
<body ng-controller="MyController as vm">

<div class="well">
    <h1 ng-bind="vm.title"></h1>
</div>

<div class="well">
    <h2>指令one-transclude 内部含有元素</h2>
    <!--  指令one-transclude 内部含有元素-->
    <one-transclude class="one-transclude-self">
        <div class="one-transclude-self__footer">$AAAAAA $我是指令[one-transclude]元素内部的内容</div>
    </one-transclude>
</div>

<div class="well">
    <h2>指令one-transclude 内部不含有元素</h2>
    <!-- 指令one-transclude 内部不含有元素 -->
    <one-transclude class="one-transclude-self"></one-transclude>

</div>

<div class="well">
    <h2>指令mutil-transclude</h2>
    <!-- 指令mutil-transclude -->
    <multi-transclude>
        <multi-transclude-title>我是指令元素内部的title</multi-transclude-title>
        <multi-transclude-body>我是指令元素内部的body</multi-transclude-body>
        <multi-transclude-footer>我是指令元素内部的footer</multi-transclude-footer>
    </multi-transclude>
</div>

<div class="well">
    <div sidebox title="Links">
        <ul>
            <li>First link</li>
            <li>Second link</li>
        </ul>
    </div>
</div>
<div class="well">
    <div sidebox title="TagCloud">
        <div class="tagcloud">
            <a href="">Graphics</a>
            <a href="">AngularJS</a>
            <a href="">D3</a>
            <a href="">Front-end</a>
            <a href="">Startup</a>
        </div>
    </div>
</div>

<div class="well">
    <div ng-controller="parentController">
        <button-bar>
            <button class="primary" ng-click="onPrimary1Click()">{{primary1Label}}</button>
            <button class="primary">Primary2</button>
        </button-bar>
    </div>
</div>
</body>
<script>
    (function() {
        var app=angular.module('app', [])
            .controller('MyController', myController)
            .directive('oneTransclude', oneTransclude)
            .directive('multiTransclude', multiTransclude)
            .directive('sidebox', sideboxFn);
        myController.$inject = [];

        function myController() {
            var vm = this;
            vm.title = 'ng-transclude';
        }

        function oneTransclude() {
            return {
                restrict: 'AE',
                transclude: true,
                templateUrl: 'one-transclude.html'
            };
        }

        function multiTransclude() {
            return {
                restrict: 'AE',
                transclude: {
                    'title': 'multiTranscludeTitle',
                    'body': 'multiTranscludeBody',
                    'footer': '?multiTranscludeFooter'
                },
                templateUrl: 'multi-transclude.html'
            };
        }

        function sideboxFn() {
            return {
                restrict: 'EA',
                scope: {
                    title: '@'
                },
                transclude: true,
                template: '<div class="sidebox">\
                <div class="content">\
                <h2 class="header">{{ title }}</h2>\
                <span class="content" ng-transclude>\
                </span>\
                </div>\
                </div>'
            };
        }

        app.controller('parentController', ['$scope', '$window', function($scope, $window) {
            console.log('parentController scope id = ', $scope.$id);
            $scope.primary1Label = 'Prime1';

            $scope.onPrimary1Click = function() {
                $window.alert('Primary1 clicked');
            };
        }]);
        app.directive('primary', function() {
            return {
                restrict: 'C',
                link: function(scope, element, attrs) {
                    element.addClass('btn btn-primary');
                }
            }
        });
        app.directive('buttonBar', function() {
            return {
                restrict: 'EA',
                template: '<div class="span4 well clearfix"><div class="pull-right" ng-transclude></div></div>',
                replace: true,
                transclude: true
            };
        });
    })();
</script>
<script id="one-transclude.html" type="text/ng-template">
    <div class="one-transclude">
        <div class="one-transclude__title">
            $BBBBBB$ 我是指令[one-transclude]模板的内容
        </div>
        <hr>
        <ng-transclude>
            $CCCCCC$ 我是指令[one-transclude]模板中[ng-transclude]中的内容
        </ng-transclude>
    </div>
</script>
<script id="multi-transclude.html" type="text/ng-template">
    <div class="multi-transclude">
        <div class="multi-transclude__title" ng-transclude="title"></div>
        <div>忽略我,我就是证明我是在模板中的1</div>
        <div class="multi-transclude__body" ng-transclude="body"></div>
        <div>忽略我,我就是证明我是在模板中的2</div>
        <div class="multi-transclude__footer" ng-transclude="footer"></div>
    </div>
</script>
</html>